<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="70px" style="background-color: #386582">
            <h1 style="color: white;
            font-size: 30px;margin: 0;line-height: 70px">烘焙坊后台管理系统
                <span style="float: right;font-size: 20px">
                    欢迎{{user.nickName}}回来!
                    <a href="javascript:void(0)" @click="logout()" style="color: orange">退出登录</a>
                </span>
            </h1>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-active="currentIndex"
                         @select="handleSelect" active-text-color="orange">
                    <img src="imgs/icon.png" width="150">
                    <el-divider></el-divider>
                    <el-menu-item index="1"><i class="el-icon-user">用户管理</i></el-menu-item>
                    <el-menu-item index="2"><i class="el-icon-picture">轮播图</i></el-menu-item>
                    <el-menu-item index="3"><i class="el-icon-s-order">烘焙食谱</i></el-menu-item>
                    <el-menu-item index="4"><i class="el-icon-video-camera">烘焙视频</i></el-menu-item>
                    <el-menu-item index="5"><i class="el-icon-info">行业资讯</i></el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <!--用户表格开始-->
                <el-table v-if="currentIndex==1" :data="userArr">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="userName" label="用户名"></el-table-column>
                    <el-table-column prop="nickName" label="昵称"></el-table-column>
                    <el-table-column label="头像">
                        <template slot-scope="scope">
                            <el-avatar :src="scope.row.imgUrl"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column label="管理员">
                        <template slot-scope="scope">
                            <!--@change 值改变事件-->
                            <el-switch :disabled="user.id==scope.row.id" @change="change(scope.row)"
                                       v-model="scope.row.isAdmin"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button :disabled="user.id==scope.row.id" type="danger"
                                       @click="deleteUser(scope.$index,scope.row)" size="mini">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--用户表格结束-->
                <!--轮播图表格开始-->
                <el-table v-if="currentIndex==2" :data="bannerArr">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column label="轮播图">
                        <template slot-scope="scope">
                            <img :src="scope.row.imgUrl" width="200">
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="bannerDelete(scope.$index,scope.row)" type="danger" size="mini">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--轮播图表格结束-->
                <!--内容表格开始-->
                <el-table v-if="currentIndex>2" :data="contentArr">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="title" label="标题"></el-table-column>
                    <el-table-column label="封面" width="100px">
                        <template slot-scope="scope">
                            <img :src="scope.row.imgUrl" width="60px">
                        </template>
                    </el-table-column>
                    <el-table-column v-if="currentIndex!=4" prop="brief" label="摘要" width="300px"></el-table-column>
                    <el-table-column prop="categoryName" label="分类" width="80px"></el-table-column>
                    <el-table-column prop="viewCount" label="浏览量" width="50px"></el-table-column>
                    <el-table-column prop="commentCount" label="回复量" width="50px"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="success" @click="contentEdit(scope.$index,scope.row)" size="mini">编辑
                            </el-button>
                            <el-button type="danger" @click="contentDelete(scope.$index,scope.row)" size="mini">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--内容表格结束-->
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<!--引入Vue框架-->
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/index.js"></script>
<!--导入axios框架库资源-->
<script src="js/axios.min.js"></script>
<script src="js/my-header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                currentIndex: "1",
                userArr: [
                    {
                        "id": 17,
                        "userName": "jerry",
                        "nickName": "杰瑞",
                        "imgUrl": "imgs/1.jpg",
                        "isAdmin": false,
                        "createTime": "2023/05/11 20:40:44"
                    },
                    {
                        "id": 12,
                        "userName": "tom",
                        "nickName": "汤姆",
                        "imgUrl": "imgs/b9c21937-d7f8-4843-8f53-7eb9d979829a.jpg",
                        "isAdmin": true,
                        "createTime": "2023/04/31 00:43:52"
                    },
                    {
                        "id": 13,
                        "userName": "ldh",
                        "nickName": "刘德华",
                        "imgUrl": "imgs/b8401cd3-4dd1-4a8d-94c7-e61388ed5423.gif",
                        "isAdmin": false,
                        "createTime": "2023/03/25 15:03:08"
                    },
                    {
                        "id": 13,
                        "userName": "gfc",
                        "nickName": "郭富城",
                        "imgUrl": "imgs/b8401cd3-4dd1-4a8d-94c7-e61388ed5423.gif",
                        "isAdmin": false,
                        "createTime": "2023/03/20 15:03:08"
                    },
                    {
                        "id": 13,
                        "userName": "lm",
                        "nickName": "黎明",
                        "imgUrl": "imgs/b8401cd3-4dd1-4a8d-94c7-e61388ed5423.gif",
                        "isAdmin": false,
                        "createTime": "2023/02/25 15:03:08"
                    }],
                bannerArr: [{
                    "id": 1,
                    "imgUrl": "./imgs/banner1.jpg",
                    "createTime": "2023/02/08"
                },
                    {
                        "id": 2,
                        "imgUrl": "./imgs/banner2.jpg",
                        "createTime": "2023/02/08"
                    },
                    {
                        "id": 3,
                        "imgUrl": "./imgs/banner3.jpg",
                        "createTime": "2023/02/08"
                    }],
                contentArr: [{
                    "id": 11,
                    "title": "入口即酥的超浓花生酱酥饼a",
                    "imgUrl": "imgs/0237dcfc-9f6a-47cd-b45e-59a5897f2992.jpg",
                    "brief": "花生酱+花生油=超浓郁花生香\n没有糖粉，用了白砂糖\n本是入口即酥\n却又在酥后留下些许颗粒感\n花生浓香",
                    "categoryName": "家常菜",
                    "viewCount": 8,
                    "commentCount": 0,
                    "createTime": "2023/03/27"
                },
                    {
                        "id": 12,
                        "title": "枣泥花式面包,好吃到爆",
                        "imgUrl": "imgs/58fb9623-c229-4b52-9a99-a4ebb9045675.jpg",
                        "brief": "之前做了枣泥馅，配上花式面包，好吃到爆。\n \n枣泥花式面包的用料\n肉松面包面团 见肉松面包配方，枣泥",
                        "categoryName": "面包",
                        "viewCount": 1,
                        "commentCount": 0,
                        "createTime": "2023/03/28"
                    },
                    {
                        "id": 13,
                        "title": "酥脆培根吐司芝士卷，人见人爱",
                        "imgUrl": "imgs/79b0dd4c-8bb8-43d8-b820-390307ae6e16.jpg",
                        "brief": "人见人爱的培根平时一般都是放吐司里面做三文治吃今天培根要露脸啦哈哈哈哈简单快手酥脆可口的培根吐司芝士",
                        "categoryName": "家常菜",
                        "viewCount": 1,
                        "commentCount": 0,
                        "createTime": "2023/03/28"
                    },
                    {
                        "id": 14,
                        "title": "开放式三明治,一份小清新快手早餐",
                        "imgUrl": "imgs/7fe42b87-cd9c-41a8-bd59-5b726f462bc7.png",
                        "brief": "\n昨夜下了很怕人的骤雨，清晨办公桌上的薄荷微微抖动它的叶子。一份小清新快手早餐，让生活简洁不简单。\n",
                        "categoryName": "小食",
                        "viewCount": 1,
                        "commentCount": 0,
                        "createTime": "2023/03/28"
                    },
                    {
                        "id": 15,
                        "title": "核桃葡萄干软欧：蔓越莓种面",
                        "imgUrl": "imgs/a168704d-bfcc-4a0f-9079-d15d98087662.jpg",
                        "brief": "干，来款核桃葡萄干软欧吧！核桃是个宝，好处太多，不一一列举啦！\n \n蔓越莓种面的用料\n主面团， 蔓越",
                        "categoryName": "面包",
                        "viewCount": 2,
                        "commentCount": 0,
                        "createTime": "2023/03/28"
                    },
                    {
                        "id": 16,
                        "title": "蔓越莓绿豆糕，味道还不错值得一试!",
                        "imgUrl": "imgs/b393a19f-d2cb-41ff-b395-a4e08538c210.jpg",
                        "brief": "全家都很喜欢吃绿豆糕，但楼下甜品店的绿豆糕太甜了，那就自己动手做吧。之前尝试过带皮绿豆，颜色做出来没",
                        "categoryName": "面包",
                        "viewCount": 4,
                        "commentCount": 0,
                        "createTime": "2023/03/28"
                    },
                    {
                        "id": 17,
                        "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
                        "imgUrl": "imgs/15fcffb1-3ef5-41dc-87d4-514469e10bdd.jpg",
                        "brief": "椰蓉的香味 任谁都抗拒不了吧正好还有半个红心火龙果做成了***嫩的小爱心面包可爱又好吃可以做9个。\n",
                        "categoryName": "小食",
                        "viewCount": 15,
                        "commentCount": 1,
                        "createTime": "2023/03/28"
                    },
                    {
                        "id": 18,
                        "title": "爆浆抹茶甜甜圈面包，自带幸福感的小甜甜",
                        "imgUrl": "imgs/3daca90c-a075-48bb-bead-5f89bbdd42f8.jpg",
                        "brief": "爆浆抹茶甜甜圈面包好吃的起飞的爆浆抹茶甜甜圈，从里到外被抹茶包裹着，自带幸福感的小甜甜，抹茶控们完全",
                        "categoryName": "家常菜",
                        "viewCount": 18,
                        "commentCount": 1,
                        "createTime": "2023/03/28"
                    }],
                user: {nickName: '汤姆'}
            }
        },
        methods: {
            contentEdit(i, c) {
                let type = v.currentIndex - 2;
                location.href = "./postArticle.html?type=" + type + "&id=" + c.id;
            },
            contentDelete(i, c) {
                if (confirm("您确认删除此文章吗?")) {
                    axios.post("/v1/contents/" + c.id + "/delete").then(function (response) {
                        if (response.data.code == 1) {
                            v.contentArr.splice(i, 1);
                        }
                    })
                }
            },
            bannerDelete(i, b) {
                if (confirm("您确认删除此轮播图吗?")) {
                    axios.post("/v1/banners/" + b.id + "/delete").then(function (response) {
                        if (response.data.code == 1) {
                            v.bannerArr.splice(i, 1);
                        }
                    })
                }
            },
            logout() {
                if (confirm("您确定退出登录吗?")) {
                    console.log("进入了判断体");
                    axios.get("/v1/users/logout").then(function () {
                        localStorage.clear();
                        location.href = "./login.html";
                    })
                }
                console.log("没有进入判断体");
            },
            change(user) {
                if (user.id == v.user.id && !user.isAdmin) {
                    v.$message.error("不能取消自己的管理员状态!");
                    user.isAdmin = true;
                    return;
                }

                //发请求修改用户的管理员状态
                axios.post("/v1/users/" + user.id + "/" + (user.isAdmin ? 1 : 0) + "/change")
                    .then(function (response) {
                        if (response.data.code == 1) {
                            if (user.isAdmin) {
                                v.$message.success("设置为管理员!");
                            } else {
                                v.$message.success("取消管理员!");
                            }
                        }
                    })
            },
            handleSelect(key, keyPath) {
                location.href = "./admin.html?key=" + key;
            },
            deleteUser(i, user) {
                //判断删除的用户是否是当前登录的用户
                if (v.user.id == user.id) {
                    v.$message.error("不能删除自己!");
                    return;
                }
                if (confirm("您确定要删除" + user.nickName + "吗?")) {
                    //发出删除请求
                    axios.post("/v1/users/" + user.id + "/delete").then(function (response) {
                        if (response.data.code == 1) {
                            v.userArr.splice(i, 1);
                        }
                    })
                }

            }
        },
        created: function () {
            if (location.search.includes("key")) {
                let key = new URLSearchParams(location.search).get("key");
                this.currentIndex = key;
                if (key > 2) {
                    let type = key - 2;
                    axios.get("/v1/contents/" + type + "/admin").then(function (response) {
                        if (response.data.code == 1) {
                            v.contentArr = response.data.data;
                        }
                    })
                }
            }


            //请求所有用户信息
            axios.get("/v1/users/").then(function (response) {
                if (response.data.code == 1) {
                    v.userArr = response.data.data;
                } else {
                    alert("无权访问!");
                    location.href = "/";
                }
            })

            //发请求获取轮播图数据
            axios.get("/v1/banners/admin").then(function (response) {
                if (response.data.code == 1) {
                    v.bannerArr = response.data.data;
                }
            })
        }
    })
</script>
</html>